<!DOCTYPE HTML>
<html>
	<head>
		<meta charset="utf-8">
		<meta name="viewport" content="maximum-scale=1.0,minimum-scale=1.0,user-scalable=0,width=device-width,initial-scale=1.0"/>
		<meta name="format-detection" content="telephone=no,email=no,date=no,address=no">
		<title></title>
		<link rel="stylesheet" type="text/css" href="../../css/aui/aui-win.css" />
		<link rel="stylesheet" type="text/css" href="../../css/winu-ui.css" />
		<style type="text/css">
			.aui-bar-1d9dd5 {
				background: #1d9dd5;
			}
			.aui-bar-b23e4b {
				background: #b23e4b;
			}
			#nav-list {
				margin-top: 45px;
				background: #fff;
			}
			#nav-list ul {
				width: 100%;
				height: 44px;
				border-bottom: 1px solid #e2e2e2;
			}
			#nav-list ul li a {
				color: #000;
				display: block;
				width: 100%;
				height: 43px;
				text-align: center;
				line-height: 43px;
				border-bottom: 2px solid #fff;
			}
			#nav-list ul li a.on {
				color: #1d9dd5;
				border-bottom: 3px solid #1d9dd5;
			}
		</style>
	</head>
	<body>
		<header class="aui-bar aui-bar-nav aui-bar-1d9dd5" id='aui-header'>
			<a class="aui-pull-left" tapmode  onclick="H.$closeCurrentWin();"> <span class="aui-iconfont aui-icon-left"></span>返回 </a>
			<div class="aui-title">
				窗口组带切换
			</div>
			<nav id="nav-list">
				<ul class="winu-flex-box-horizontal">
					<li class="winu-flex-item" tapmode >
						<a class="on">科技</a>
					</li>
					<li class="winu-flex-item winu-center-all" tapmode >
						<a>社会</a>
					</li>
					<li class="winu-flex-item winu-center-all" tapmode >
						<a>娱乐</a>
					</li>
				</ul>
			</nav>
		</header>
	</body>
	<script type="text/javascript" src="../../script/AHelper.js"></script>
	<script type="text/javascript" src="../../script/zepto.min.js"></script>
	<script type="text/javascript">
		function setStyle(index) {
			var that = $("#nav-list li").eq(index);
			that.children("a").addClass("on").parent().siblings().children("a").removeClass("on");
		}

		Zepto(function($) {
			$("#nav-list").on("tap", "li", function() {
				var that = $(this);
				var index = that.index();
				setStyle(index);
				// 设置索引
				H.$setFrameGroupIndex('groups', index);
			});
		});
		H.ready(function() {
			H.$openFrameGroupWithNav(function(ret, err) {
				setStyle(ret.index);
			}, 'aui-header', {
				name : 'groups',
				frames : [{
					url : 'group_one_body.html',
					name : 'group_one_body'
				}, {
					url : 'group_two_body.html',
					name : 'group_two_body'
				}, {
					url : 'group_three_body.html',
					name : 'group_three_body'
				}]
			});
		});
	</script>
</html>